<template>
  <view class="order_card" @tap="tap">
    <view class="top">
      <view class="time">
        <view>{{ item.code ? item.code : "" }}</view>
        <view class="name">{{
          item.createUserName ? item.createUserName : ""
        }}</view>
      </view>

      <view
        class="status"
        :class="
          item.orderStatus === 'SAVE'
            ? 'green'
            : item.orderStatus === 'PASS'
            ? 'blue'
            : 'red'
        "
        >{{ StatusList[item.orderStatus] }}</view
      >
    </view>
    
    <view class="detail-wrap">
      <!-- <view>
        <view class="label">仓库</view>
        <view class="name">{{
          item.warehouseName ? item.warehouseName : ""
        }}</view>
      </view> -->
      <view>
        <view class="label">商品条码数</view>
        <view class="name">{{ item.detailCount }}</view>
      </view>
      <view>
        <view class="label">商品数量</view>
        <view class="name">{{ item.detailProductNum }}</view>
      </view>
      <!-- <view>
        <view class="label">箱数</view>
        <view class="name">{{ item.boxCount }}</view>
      </view> -->
    </view>
    <u-line margin="20rpx 0rpx"></u-line>
    <view class="tip">备注:{{ item.remark }}</view>
  </view>
</template>
<script>
export default {
  name: "goods",
  data() {
    return {
      marginLeft: 10, //上限170
      x: 0,
      left: false,
      StatusList: { SAVE: "保存", PASS: "审核", CLOSED: "关闭" },
    };
  },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    updateNum: {
      type: Boolean,
      default: true,
    },
    updatePath: {
      type: String,
      default: "/pages/shopping/detail",
    },
    type: {
      type: String,
      default: "",
    },
  },
  methods: {
    touchstart(e) {
      const touch = e.touches[0] || e.changedTouches[0];
      this.x = touch.clientX;
    },
    tap() {
      this.$emit("handleClick");
    },
    touchmove(e) {
      if (!this.updateNum) return;
      const touch = e.touches[0] || e.changedTouches[0];
      const marginLeft = (touch.clientX - this.x) >> 0;
      if (marginLeft > -35 && marginLeft < 35) return;
      if (this.left) {
        if (marginLeft < 0) {
          this.marginLeft = -150;
        } else if (marginLeft > 160) {
          this.marginLeft = 10;
        } else {
          this.marginLeft = -150 + marginLeft;
        }
      } else {
        if (marginLeft < -150) {
          this.marginLeft = -150;
        } else if (marginLeft > 10) {
          this.marginLeft = 10;
        } else {
          this.marginLeft = marginLeft;
        }
      }
    },
    touchend(e) {
      if (this.marginLeft < -75) {
        this.marginLeft = -150;
        this.left = true;
      } else {
        this.marginLeft = 10;
        this.left = false;
      }
    },
    del() {
      this.$emit("del");
    },
    jumpDetail() {
      // if (!this.updateNum) return;

      // uni.navigateTo({
      //   url: this.updatePath,
      // });
      //设置接收回调
      uni.$emit("item", this.item);
    },
  },
};
</script>
<style scoped lang="scss">
.order_card {
  height: auto;
  background: white;
  overflow: hidden;
  position: relative;
  padding: 20rpx;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
      font-size: 26rpx;
      color: #888;
      .name {
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .status {
      font-size: 24rpx;
      border-radius: 10rpx;
      padding: 8rpx 20rpx;
      height: 30rpx;
    }
    .blue {
      background-color: #eff7ff;
      color: #1a8bff;
    }
    .green {
      background-color: #e2f9f2;
      color: #1acd9a;
    }
    .red {
      background-color: #ffedee;
      color: #ff5967;
    }
  }
  .tip {
    margin: 0 20rpx 20rpx;
    font-size: 26rpx;
    color: #888;
  }
  .detail-wrap {
    display: flex;
    text-align: center;
    justify-content: space-around;
    margin: 10rpx 20rpx;
    background-color: #f4f5f9;
    padding: 10rpx 0;
    .label {
      font-size: 26rpx;
      color: #888;
    }
  }
}
</style>
